<template>
  <div class="attachForm">
    <div class="allDown" :class="{ allDownTwo: !disabled && !hideDeleteBtn }">
      <el-button
        icon="el-icon-download"
        size="mini"
        type="text"
        class="downloadAllBtn"
        @click="downloadAll"
        v-if="showDownload"
        >一键下载</el-button
      >
      <el-button
        icon="el-icon-download"
        size="mini"
        type="text"
        class="downloadAllBtn"
        @click="downloadTemplate"
        v-if="templateDownload"
        >模板下载</el-button
      >
    </div>

    <el-upload
      ref="upload"
      action="#"
      :on-change="changeFile"
      :file-list="newUploadObj.files"
      name="fileList"
      :class="{
        attachFormUpload: newUploadObj.files.length,
        allFileList: !disabled && !hideDeleteBtn,
        showlist: !showlist,
      }"
      class="attachLine"
      :auto-upload="isInstantUpload"
      :accept="acceptType"
      :limit="limit"
      :on-exceed="onExceed"
      :multiple="multiple"
      v-if="showFile"
      :http-request="saveItemFile"
    >
      <!-- <el-button slot="otherTrigger" size="mini" type="primary" v-if="!disabled">
        {{ btnName }}
      </el-button>-->
      <el-button
        slot="trigger"
        icon="el-icon-paperclip"
        size="mini"
        type="text"
        >{{ btnName || "添加附件" }}</el-button
      >
      <el-button
        icon="el-icon-video-camera"
        size="mini"
        type="text"
        v-if="showVideo"
        class="downloadAllBtn"
        @click="switchVideo"
        >视图切换</el-button
      >
      <div slot="tip" class="attach-form_tip" v-if="title && !disabled">
        Tip: {{ title }}
      </div>
      <div slot="file" slot-scope="{ file }" class="file_list" v-if="showlist">
        <div class="file-list" v-if="file.imgUrl">
          <el-image
            class="item-image"
            :src="file.imgUrl"
            :preview-src-list="file.imgList"
          />
          {{ file.name }}
          <span class="createTime" v-if="showTime">{{ file.createTime }}</span>
          <span class="btn-image">
            <el-button
              type="text"
              size="mini"
              icon="el-icon-zoom-in"
              v-if="file.id"
              @click="previewFile(file)"
              title="预览"
            ></el-button>
            <el-button
              type="text"
              size="mini"
              icon="el-icon-download"
              v-if="file.id"
              @click="downloadFile(file)"
              title="下载"
            ></el-button>
            <el-button
              type="text"
              size="mini"
              icon="el-icon-delete"
              @click="removeFile(file)"
              title="移除"
              v-if="!disabled && !isDelete"
            ></el-button>
            <el-button
              type="text"
              size="mini"
              icon="el-icon-delete"
              @click="deleteFile(file)"
              title="删除"
              v-if="!disabled && isDelete && !hideDeleteBtn"
            ></el-button>
          </span>
        </div>
        <p class="file-boder_base" v-else>
          <img :src="file.url" class="el-upload-list__item-thumbnail" />
          {{ file.name }}
          <span class="createTime" v-if="showTime">{{ file.createTime }}</span>
          <span class="upload-btn-in">
            <el-button
              type="text"
              size="mini"
              icon="el-icon-zoom-in"
              v-if="file.id"
              @click="previewFile(file)"
              title="预览"
            ></el-button>
            <el-button
              type="text"
              size="mini"
              icon="el-icon-download"
              v-if="file.id"
              @click="downloadFile(file)"
              title="下载"
            ></el-button>
            <el-button
              type="text"
              size="mini"
              icon="el-icon-delete"
              @click="removeFile(file)"
              title="移除"
              v-if="!disabled && !isDelete"
            ></el-button>
            <el-button
              type="text"
              size="mini"
              icon="el-icon-delete"
              @click="deleteFile(file)"
              title="删除"
              v-if="!disabled && isDelete && !hideDeleteBtn"
            ></el-button>
          </span>
        </p>
      </div>
      <div slot="file" slot-scope="{ file }" class="file_list" v-else>
        <div class="file-image" v-if="file.imgUrl">
          <el-image
            class="item-image"
            :src="file.imgUrl"
            :preview-src-list="file.imgList"
          />
          <span class="btn-image">
            <el-button
              type="text"
              size="mini"
              icon="el-icon-zoom-in"
              v-if="file.id"
              @click="previewFile(file)"
              title="预览"
            ></el-button>
            <el-button
              type="text"
              size="mini"
              icon="el-icon-download"
              v-if="file.id"
              @click="downloadFile(file)"
              title="下载"
            ></el-button>
            <el-button
              type="text"
              size="mini"
              icon="el-icon-delete"
              @click="removeFile(file)"
              title="移除"
              v-if="!disabled && !isDelete"
            ></el-button>
            <el-button
              type="text"
              size="mini"
              icon="el-icon-delete"
              @click="deleteFile(file)"
              title="删除"
              v-if="!disabled && isDelete && !hideDeleteBtn"
            ></el-button>
          </span>
        </div>
        <div class="file-boder" v-else>
          <img :src="file.url" class="item-image" />
          <div class="fileName">
            <span>{{ file.name }}</span>
          </div>
          <span class="upload-btn-in">
            <el-button
              type="text"
              size="mini"
              icon="el-icon-zoom-in"
              v-if="file.id"
              @click="previewFile(file)"
              title="预览"
            ></el-button>
            <el-button
              type="text"
              size="mini"
              icon="el-icon-download"
              v-if="file.id"
              @click="downloadFile(file)"
              title="下载"
            ></el-button>
            <el-button
              type="text"
              size="mini"
              icon="el-icon-delete"
              @click="removeFile(file)"
              title="移除"
              v-if="!disabled && !isDelete"
            ></el-button>
            <el-button
              type="text"
              size="mini"
              icon="el-icon-delete"
              @click="deleteFile(file)"
              title="删除"
              v-if="!disabled && isDelete && !hideDeleteBtn"
            ></el-button>
          </span>
        </div>
      </div>
    </el-upload>
    <dialogPublic
      :title="'文件预览'"
      :show.sync="showPreview"
      appendTobody
      fullscreen
      noFootBtn
      @doClose="() => (showPreview = false)"
    >
      <preview :fileObj="currentAttach" v-if="showPreview"></preview>
    </dialogPublic>
    <dialogPublic
      :title="'模板下载'"
      :show.sync="showTemplate"
      noFootBtn
      width="40%"
      @doClose="() => (showTemplate = false)"
    >
      <div style="min-height: 300px" v-if="showTemplate">
        <slot name="template">
          <attachFormNew
            :attachSetting="{ businessId: templateCode }"
            :isDelete="true"
            isInstantUpload
            :disabled="!templateUpload"
          ></attachFormNew>
        </slot>
      </div>
    </dialogPublic>
    <image-viewer
      v-if="showViewer"
      :on-close="closeViewer"
      :imgIdList="imgIdList"
    />
  </div>
</template>
<script>
// 导入组件
import preview from "@/components/attach/preview";
import ImageViewer from "./image-viewer";
import {
  uploadAttach, //附件上传
  uploadAttachSingle, //单个附件上传
  deleteFiles, //删除单个附件通过文件id
  deleteFilesType, //删除附件通过业务id,业务类型
  getAttachList, //附件列表获取
} from "@/api/common";

let prevOverflow = "";
export default {
  props: {
    //是否隐藏删除按钮
    hideDeleteBtn: {
      type: Boolean,
      default: false,
    },
    /**
     * 文件列表
     * 数据格式[{name: '文件名', url:'文件地址'}]
     */
    disabled: {
      type: Boolean,
      default: false,
    },
    //是否即时上传
    isInstantUpload: {
      type: Boolean,
      default: false,
    },
    /* 是否立即删除 */
    isDelete: {
      type: Boolean,
      default: false,
    },
    //支持上传的文件类型['doc','pdf','png']
    accept: {
      type: Array,
      default: () => {
        return [];
      },
    },
    //最大允许上传个数
    limit: {
      type: Number,
      default: null,
    },
    //是否支持多选
    multiple: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
    },
    businessType: {
      type: String,
      default: "",
    },
    rules: null,
    attachSetting: {
      type: Object,
      default: () => {
        return { businessId: "", businessType: "" };
      },
    },
    factDelete: {
      type: Boolean,
      default: true,
    },
    //模板编号
    templateCode: {
      type: String,
      default: "",
    },
    templateUpload: {
      type: Boolean,
      default: false,
    },
    templateDownload: {
      type: Boolean,
      default: false,
    },
    showTime: {
      type: Boolean,
      default: false,
    },
    isListView: {
      type: Boolean,
      default: true,
    },
  },
  components: { preview, ImageViewer },

  data() {
    return {
      showlist: true,
      showFile: true,
      btnName: "选取文件",
      //接收类型
      acceptTypeArr: [
        ".pdf",
        ".jpg",
        ".jpeg",
        ".gif",
        ".bmp",
        ".png",
        ".mp4",
        ".doc",
        ".docx",
        ".docm",
        ".dotx",
        ".dotm",
        ".xls",
        ".xlsx",
        ".xlsm",
        ".xltx",
        ".xltm",
        ".txt",
        ".ppt",
        ".pptm",
        ".ppsx",
        ".ppsm",
        ".pptx",
        ".zip",
        ".rar",
        ".7z",
        ".7-zip",
        ".tar",
        ".gzip",
        ".bz2",
        ".jar",
      ],
      isSave: false,
      //文件分类
      typeObj: {
        imge: ["jpg", "jpeg", "gif", "bmp", "png", "svg"],
        pdf: ["pdf"],
        video: ["mp4", "m2v", "mkv", "rmvb", "wmv", "avi", "flv", "mov", "m4v"],
        html: ["htm", "html"],
        docx: ["doc", "docx", "docm", "dotx", "dotm"],
        xlsx: ["xls", "xlsx", "xlsm", "xltx", "xltm", "xlsb", "xlam"],
        // txt:["txt"],
        pptx: ["ppt", "pptx", "pot", "potx", "pptm", "ppsx", "ppsm"],
        zip: ["zip", "rar", "7z", "7-zip", "tar", "gzip", "bz2", "jar"],
      },
      //当前预览文件
      currentAttach: {},
      newUploadObj: {
        deleteId: [],
        files: [],
      },
      showPreview: false, //
      showViewer: false, //
      showPdf: false,
      showTemplate: false,
      preurl: "", //预览URL
      htmlText: "预览转换中...",
      imgIdList: [],
    };
  },
  computed: {
    acceptType() {
      return this.accept.join();
    },
    showDownload() {
      return this.newUploadObj.files.length > 1 && this.isSave;
    },
    showVideo() {
      return this.newUploadObj.files.length > 0 ? true : false;
    },
  },
  watch: {
    "newUploadObj.files": {
      handler(val) {
        let { deleteId, files } = this.newUploadObj;
        this.$emit("fileChange", files);
      },
      deep: true,
    },
    //监听页面标识变化
    "attachSetting.businessId"(val) {
      // let fragment = this.attachSetting.fragment;
      if (val) {
        this.getFileList();
      }
    },
  },
  created() {
    this.showlist = this.isListView;
    this.init();
  },
  methods: {
    init() {
      if (this.isInstantUpload) {
        this.btnName = "上传文件";
      }
      if (this.attachSetting.btnName) {
        this.btnName = this.attachSetting.btnName;
      }
      if (this.businessType) {
        this.attachSetting.businessType = this.businessType;
      }
      if (this.attachSetting.businessId) {
        this.getFileList();
      }
    },
    removeFile(file) {
      let arr = this.newUploadObj.files.filter((i) => {
        return i.uid != file.uid;
      });
      this.newUploadObj.files = arr || [];
      if (file.id) {
        this.newUploadObj.deleteId.push(`${file.id}`);
      }
    },
    getDeleteIds() {
      return this.newUploadObj.deleteId || [];
    },
    deleteFile(data) {
      if (data.id) {
        //已上传
        this.$confirm("此操作将删除【" + data.name + "】, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            deleteFiles(data.id)
              .then((res) => {
                this.getFileList();
                this.$emit("successfullyDelete");
                this.$message.success("文件删除成功！");
              })
              .catch((e) => {
                this.$message.warning("文件删除失败！");
              });
          })
          .catch((e) => {});
      } else {
        //未上传
        this.removeFile(data);
      }
    },

    //选择完文件之后
    changeFile(file, fileList) {
      // if (!this.isInstantUpload) {
      if (this.beforeUpload(file.raw, fileList)) {
        file.raw.url = this.getFileUrl(file.raw.name);
        if (this.isInstantUpload) {
          this.newUploadObj.files.push(file.raw);
        } else {
          if (file.raw.type == "image/png") {
            const fileReader = new FileReader();
            fileReader.readAsDataURL(file.raw);
            fileReader.onload = () => {
              file.raw.imgUrl = fileReader.result;
              file.raw.imgList = [fileReader.result];
              this.newUploadObj.files.push(file.raw);
            };
          } else {
            this.newUploadObj.files.push(file.raw);
          }
        }
      } else {
        fileList.map((i, index) => {
          if (i.uid == file.uid) {
            this.$refs.upload.uploadFiles.splice(index, 1);
          }
        });
      }

      this.$emit("changeFile", { file, fileList });
      // }
    },
    //预览文件
    /*       this.preurl =
        process.env.VUE_APP_BASEURL +
        "/eam-common-web/attachment/preview/?fileId=" +
        file.id; */
    previewFile(file) {
      this.$emit("previewFile");
      let { extension, path, name } = file;
      let type = "";
      for (const key in this.typeObj) {
        //循环遍历typeObj
        let arr = this.typeObj[key];
        if (arr.includes(extension)) {
          //比较找到typeObj相应的后缀名，从而判断它属于哪个类型
          type = key;
        }
      }
      const fileSizeByMb = file.size / 1024
      if (type == "imge") {
        let fileId = file.id;
        this.imgIdList = [fileId];
        // prevent body scroll
        prevOverflow = document.body.style.overflow;
        document.body.style.overflow = "hidden";
        this.showViewer = true;
      } else if (["video", "html", "pdf"].includes(type)) {
        //"imge",
        this.currentAttach = file;
        this.showPreview = true;
      } else {
        this.$confirm(`该文件类型不支持或文件大小过大，暂不支持预览，是否直接下载？`, "提示", {
          confirmButtonText: "立即下载",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.downloadFile(file);
        });
      }
    },
    // base64编码
    base64Encode(str) {
      return btoa(unescape(encodeURIComponent(str)));
    },
    //执行下载
    doDownload(res, fileName) {
      const blob = new Blob([res]);
      const url = window.URL.createObjectURL(blob);
      const elink = document.createElement("a");
      elink.download = fileName;
      elink.style.display = "none";
      elink.href = url;
      document.body.appendChild(elink);
      elink.click();
      URL.revokeObjectURL(elink.href); // 释放URL 对象
      document.body.removeChild(elink);
    },
    // 点击下载
    downloadFile(row) {
      let fileName = row.name;
      this.$utils.downloadFile(row.id, fileName);
    },
    //一键下载
    downloadAll() {
      let { businessId, businessType, zipName } = this.attachSetting;
      zipName = (zipName || "附件") + ".zip";
      this.$utils.downloadZipFile(businessId, businessType, zipName);
    },
    //下载模板
    downloadTemplate() {
      this.showTemplate = true;
    },
    //是否显示预览按钮
    showPreBtn(file) {
      let typeArr = ["jpg", "jpeg", "gif", "bmp", "png", "pdf"];
      if (file.id) {
        if (file.pdfUrl) {
          return true;
        } else {
          return typeArr.includes(file.extension);
        }
      } else {
        return false;
      }
    },
    onExceed(file, fileList) {
      //超出文件限制个数时用
      this.$message.warning(
        "文件数量超过限制！最多只能上传" + this.limit + "个文件！"
      );
      // this.newUploadObj.files.splice(this.newUploadObj.files.length - 1, 1);
      // this.newUploadObj.files.push(file[0]);
    },
    //选中文件上传前验证
    beforeUpload(file, fileList) {
      let typeArr = file.name.split(".");
      let type = typeArr[typeArr.length - 1];
      let isUpload = true;
      if (this.acceptType) {
        if (this.acceptType.indexOf(type) == -1) {
          this.$message.error("文件类型不符合！");
          isUpload = false;
        }
      }
      if (this.rules) {
        let rulesResult = this.rules(file, fileList);
        if (!rulesResult.success) {
          isUpload = false;
          this.$message.error(rulesResult.msg || "验证错误");
        }
      }
      return isUpload;
    },
    //返回的附件数据
    returnFilsObj() {
      let { deleteId, files } = this.newUploadObj;
      let filesObj = { deleteId, files };
      return filesObj;
    },
    //提交附件信息
    doSubmitFiles(type = "save") {
      new Promise((resolve, reject) => {
        let { businessId, businessType } = this.attachSetting;
        let { deleteId, files } = this.newUploadObj;
        let formData = new FormData();
        if (files.length != 0 || deleteId.length != 0) {
          files.map((i) => {
            if (!i.hasOwnProperty("id")) {
              formData.append("files", i);
            }
          });
          let form = {
            businessId,
            businessType,
            deleteFileIds: deleteId.join(),
          };
          if (!this.factDelete) {
            delete form.deleteFileIds;
          }
          uploadAttach(form, formData)
            .then((res) => {
              //this.$message.success("保存成功！");
              if (type != "add") {
                this.getFileList();
              }
              resolve(res.data);
              this.$emit("uploadSuccess", res.data);
            })
            .catch((res) => {
              reject(res);
              this.$message.warning("文件上传失败,请重新上传！");
            });
        }
      });
    },
    //保存附件，当删除的类型为即时删除时
    save() {
      let { businessId, businessType } = this.attachSetting;
      let { deleteId, files } = this.newUploadObj;
      let formData = new FormData();
      let fileSize = 0;
      if (businessId && files.length) {
        files.map((i) => {
          fileSize = fileSize + i.size;
          if (!i.hasOwnProperty("id")) {
            formData.append("files", i);
          }
        });
        fileSize = fileSize / 1024 / 1024;
        // if (fileSize > 110) {
        //   this.$message.warning("上传文件的总体大小超过最大限制110M，请重新选择要上传的文件！");
        // } else {
        let form = {
          businessId, //单据id
          businessType, //单据类型
        };
        uploadAttach(form, formData)
          .then((res) => {
            this.getFileList();
            this.$emit("uploadSuccess", res.data);
          })
          .catch((res) => {
            this.$message.warning("文件上传失败,请重新上传！");
          });
        // }
      } else {
        this.$emit("uploadSuccess", []);
      }
    },
    //立即上传
    saveItemFile(file) {
      setTimeout(() => {
        let { businessId, businessType, subBusinessId } = this.attachSetting;
        let formData = new FormData();
        if (businessId && this.newUploadObj.files.length > 0) {
          for (let i = 0; i < this.newUploadObj.files.length; i++) {
            formData.append("file", this.newUploadObj.files[i]);
          }
          let form = {
            businessId, //单据id
            businessType, //单据id
            subBusinessId,
          };
          uploadAttachSingle(form, formData)
            .then((res) => {
              this.getFileList();
              // this.$message.success("保存成功！");
            })
            .catch((res) => {
              this.$message.warning("文件上传失败,请重新上传！");
            });
        }
      }, 0);
    },
    //获取附件列表数据
    getFileList() {
      let { businessId, businessType } = this.attachSetting;
      const database = localStorage.getItem("currDs") || "";
      if (businessId) {
        let form = {
          businessId: businessId,
          businessType: businessType,
        };
        getAttachList(form).then((res) => {
          let data = res.data || [];
          let promList = [];
          data.forEach(async (item) => {
            let pro = new Promise(async (resolve, reject) => {
              item.url = this.getFileUrl(item.name);
              if (this.typeObj.imge.includes(item.extension) && !item.imgUrl) {
                let baseUrl = await this.$utils.echoImg(
                  item.id,
                  null,
                  database
                );
                item.imgUrl = baseUrl;
                //item.imgList = [baseUrl];
                resolve(item);
              } else if (item.imgUrl) {
                //item.imgList = [item.imgUrl];
                resolve(item);
              } else {
                resolve(item);
              }
            });
            promList.push(pro);
          });
          Promise.all(promList)
            .then((res) => {
              let list = JSON.parse(JSON.stringify(res));
              this.$set(this.newUploadObj, "files", list);
            })
            .catch((err) => {
              console.log(err);
            });
          if (data.length > 0) {
            this.isSave = true;
          }
          this.$emit("getTableList", data);
        });
      }
    },
    getFileUrl(name) {
      let len = name.split(".").length;
      let extend = name.split(".")[len - 1];
      if (this.typeObj.imge.includes(extend)) {
        return require("@/assets/img/img.svg");
      } else if (this.typeObj.pdf.includes(extend)) {
        return require("@/assets/img/Pdf.svg");
      } else if (this.typeObj.video.includes(extend)) {
        return require("@/assets/img/video.svg");
      } else if (this.typeObj.html.includes(extend)) {
        return require("@/assets/img/html.svg");
      } else if (this.typeObj.docx.includes(extend)) {
        return require("@/assets/img/docx.svg");
      } else if (this.typeObj.xlsx.includes(extend)) {
        return require("@/assets/img/xlsx.svg");
      } else if (this.typeObj.pptx.includes(extend)) {
        return require("@/assets/img/pptx.svg");
      } else if (this.typeObj.zip.includes(extend)) {
        return require("@/assets/img/ZIP.svg");
      } else {
        return require("@/assets/img/file.svg");
      }
    },
    //获取附件的列表数据
    getFileListData() {
      return this.newUploadObj.files;
    },
    //删除附件通过业务id,业务类型（立即删除）
    deleteTypeFiles() {
      let form = {
        businessId: this.attachSetting.businessId,
        businessType: this.attachSetting.businessType,
      };
      deleteFilesType(form)
        .then((res) => {
          //this.getFileList();
        })
        .catch((e) => {});
    },

    closeViewer() {
      this.$emit("closeViewer");
      document.body.style.overflow = prevOverflow;
      this.showViewer = false;
    },
    switchVideo() {
      this.showFile = false;
      this.showlist = !this.showlist;
      setTimeout(() => {
        this.showFile = true;
      }, 100);
    },
  },
};
</script>
<style lang="less">
.upload-btn-in {
  position: absolute;
  right: 5px;
}
.attachForm {
  position: relative;
}
.allDownTwo {
  top: 0px !important;
}
.attachFormUpload,
.attachLine {
  text-align: left;
}
.allFileList {
  margin-top: 0px;
}
.attachFormUpload .el-upload-list {
  margin-top: 10px;
  border: 1px solid #ebebeb;
  padding: 0 10px 10px 10px;
  text-align: left;
  border-radius: 4px;
}

.attach-form_tip {
  height: 30px;
  display: inline-block;
  font-size: 12px;
  color: #8a8a8a;
  line-height: 18px;
  margin-left: 10px;
}
.hideClass .el-upload {
  display: none;
}
.allDown {
  position: absolute;
  right: 15px;
  top: 0;
}
.downloadAllBtn {
  margin-left: 25px;
}
.el-upload {
  // position: relative;
  // left: 0px;
}
.file_list {
  min-height: 40px;
  //justify-content: center;
  align-items: center;
}
.el-upload-list__item-thumbnail {
  width: 40px;
  height: 40px;
  margin-right: 5px;
}
.showlist {
  .el-upload-list {
    display: flex;
    flex-flow: row wrap;
  }
  .el-upload-list__item {
    width: 120px;
  }
  .el-upload-list__item:first-child {
    margin-top: 5px;
  }
}
.file-boder_base {
  border: 1px dashed #ebebeb;
  padding: 0px 80px 0 10px;
  display: flex;
  align-items: center;
}
.file-boder {
  position: relative;
  border: 1px dashed #ebebeb;
  //display: flex;
  text-align: center;
  width: 120px;
  height: 140px;
  .item-image {
    width: 90%;
    height: 50%;
    //margin: 0 10px 0 5px;
  }
  .fileName {
    text-align: center;
    width: 100%;
    height: 70px;
    padding: 0 5px;
    font-size: 12px;
    line-height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .upload-btn-in {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    cursor: default;
    text-align: center;
    color: #fff;
    opacity: 0;
    font-size: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s;
    .el-button--text {
      color: #fff;
    }
  }
  .upload-btn-in:after {
    display: inline-block;
    content: "";
    height: 100%;
    vertical-align: middle;
  }
  .upload-btn-in:hover {
    opacity: 1;
  }
}
.file-image {
  position: relative;
  border: 1px dashed #ebebeb;
  display: flex;
  width: 120px;
  height: 140px;
  //align-items: center;
  .item-image {
    width: 100%;
    height: 100%;
    //margin: 0 10px 0 5px;
  }
  .btn-image {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    cursor: default;
    text-align: center;
    color: #fff;
    opacity: 0;
    font-size: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s;
    .el-button--text {
      color: #fff;
    }
  }
  .btn-image:after {
    display: inline-block;
    content: "";
    height: 100%;
    vertical-align: middle;
  }
  .btn-image:hover {
    opacity: 1;
  }
}
.file-list {
  position: relative;
  border: 1px dashed #ebebeb;
  display: flex;
  align-items: center;
  .item-image {
    width: 40px;
    height: 40px;
    margin: 0 10px 0 5px;
  }
  .btn-image {
    position: absolute;
    right: 5px;
  }
}
.createTime {
  margin: 0 auto;
}
</style>
